<template>
  <div class="app-container home">
    <div class="homebox">
      <div class="grid-content ep-bg-purple">
        <div class="smallbox" @click="tasksheetBtn">
          <img class="svgiconstyle" src="@/assets/n06.png" alt="" />
          <el-text class="textstyle">
            {{ $t("Home.tasksheet") }}
          </el-text>
        </div>
        <div class="smallbox" @click="personnelManageBtn">
          <img class="svgiconstyle" src="@/assets/n09.png" alt="" />
          <el-text class="textstyle">
            {{ $t("Home.personnel") }}
          </el-text>
        </div>
        <!-- <div class="smallbox" @click="statementMaintenanceBtn"> -->
        <!-- <img
          class="svgiconstyle"
          src="../assets/iconfont/biaogeguanli3.png"
          alt=""
        /> -->
        <!-- <el-text class="textstyle">报表管理</el-text> -->
        <!-- </div> -->

        <!-- <div class="smallbox" @click="statementDemoBtn"> -->
        <!-- <img
          class="svgiconstyle"
          src="../assets/iconfont/biaodanzujian-biaoge.png"
          alt=""
        /> -->
        <!-- <el-text class="textstyle">提升泵房和储泥池</el-text> -->
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import router from "@/router"; //路由跳转
// 接受路由传参
import { useRoute } from "vue-router";
const route = useRoute();
import emitter from "@/utils/eventbus"; //引入bus

const tasksheetBtn = () => {
  // router.push({ path: "/tasksheet", query: { type: "生产任务单获取" } }); //生产任务单
  router.push({ path: "/tasksheet", query: { type: "Home.tasksheet" } });
};
const personnelManageBtn = () => {
  router.push({ path: "/personnelManage", query: { type: "Home.personnel" } }); //人员管理
};
const statementMaintenanceBtn = () => {
  router.push({ path: "/statementMaintenance" }); //跳转到报表管理
};
const statementDemoBtn = () => {
  router.push({ path: "/statementDemo" }); //跳转到报表页
};
</script>

<style scoped lang="scss">
.homebox {
  background-image: url("@/assets/index_body2.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  margin: -20px; // 首页图片占满
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  display: flex;
  // align-items: center;
  // justify-content: center;
  border-radius: 4px;
  min-height: 36px;
  height: 90vh;
}

// 大区域
// .colstyle {
// border: 1px solid #fff;
// }

// 小方块
.smallbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 180px;
  padding: 50px;
  // background-color: #eee;

  // 图标
  .svgiconstyle {
    display: block;
    width: 90px;
    height: 90px;
    margin-bottom: 15px;
    // background-color: #be9b9b;
    // color: rgb(82, 128, 37);
  }

  .textstyle {
    color: #000;
    font-size: 20px;
    font-weight: 600;
  }
}

// 全屏
.fullscreenStyle {
  float: right;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.top-right {
  float: right;
  height: 100%;
  position: relative;
}
</style>
